import { notFound } from 'next/navigation'
import { prisma } from '@/lib/db'
import Link from 'next/link'

interface VideoPageProps {
  params: {
    id: string
  }
}

export default async function VideoPage({ params }: VideoPageProps) {
  const video = await prisma.tikTokVideo.findUnique({
    where: { id: parseInt(params.id) },
    include: {
      textExtractions: true
    }
  })

  if (!video) {
    notFound()
  }

  // 解析话题标签
  let hashtags = []
  try {
    hashtags = video.hashtags ? JSON.parse(video.hashtags) : []
  } catch (e) {
    hashtags = []
  }

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* 返回按钮 */}
        <div className="mb-6">
          <Link 
            href="/videos" 
            className="inline-flex items-center text-blue-600 hover:text-blue-800"
          >
            ← 返回视频列表
          </Link>
        </div>

        {/* 视频信息卡片 */}
        <div className="bg-white rounded-lg shadow-lg overflow-hidden">
          {/* 视频封面和基本信息 */}
          <div className="md:flex">
            {/* 封面图片 */}
            <div className="md:w-1/3">
              {video.coverUrl ? (
                <img 
                  src={video.coverUrl} 
                  alt={video.title || '视频封面'}
                  className="w-full h-64 md:h-full object-cover"
                />
              ) : (
                <div className="w-full h-64 md:h-full bg-gray-200 flex items-center justify-center">
                  <span className="text-gray-500">暂无封面</span>
                </div>
              )}
            </div>

            {/* 视频详情 */}
            <div className="md:w-2/3 p-6">
              <h1 className="text-2xl font-bold text-gray-900 mb-4">
                {video.title || video.description?.substring(0, 100) + '...' || '无标题'}
              </h1>

              {/* 作者信息 */}
              <div className="flex items-center mb-4">
                <div className="flex-1">
                  <p className="text-lg font-semibold text-gray-800">@{video.author}</p>
                  <div className="flex space-x-4 text-sm text-gray-600">
                    <span>粉丝: {video.authorFollowers?.toLocaleString() || 'N/A'}</span>
                    <span>关注: {video.authorFollowing?.toLocaleString() || 'N/A'}</span>
                  </div>
                </div>
              </div>

              {/* 统计数据 */}
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                <div className="text-center">
                  <div className="text-2xl font-bold text-red-600">{video.likes?.toLocaleString() || 0}</div>
                  <div className="text-sm text-gray-600">点赞</div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-blue-600">{video.shares?.toLocaleString() || 0}</div>
                  <div className="text-sm text-gray-600">分享</div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-green-600">{video.comments?.toLocaleString() || 0}</div>
                  <div className="text-sm text-gray-600">评论</div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-purple-600">{video.views?.toLocaleString() || 0}</div>
                  <div className="text-sm text-gray-600">播放</div>
                </div>
              </div>

              {/* 视频链接 */}
              <div className="flex space-x-4 mb-4">
                <a 
                  href={video.url} 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="bg-black text-white px-4 py-2 rounded-lg hover:bg-gray-800 transition-colors"
                >
                  在TikTok上观看
                </a>
                {video.videoUrl && (
                  <a 
                    href={video.videoUrl} 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
                  >
                    直接播放
                  </a>
                )}
              </div>
            </div>
          </div>

          {/* 详细信息 */}
          <div className="border-t border-gray-200 p-6">
            {/* 视频描述 */}
            {video.description && (
              <div className="mb-6">
                <h3 className="text-lg font-semibold text-gray-900 mb-2">视频描述</h3>
                <p className="text-gray-700 whitespace-pre-wrap">{video.description}</p>
              </div>
            )}

            {/* 话题标签 */}
            {hashtags.length > 0 && (
              <div className="mb-6">
                <h3 className="text-lg font-semibold text-gray-900 mb-2">话题标签</h3>
                <div className="flex flex-wrap gap-2">
                  {hashtags.map((tag: any, index: number) => (
                    <span 
                      key={index}
                      className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm"
                    >
                      #{tag.name}
                    </span>
                  ))}
                </div>
              </div>
            )}

            {/* 音乐信息 */}
            {(video.musicTitle || video.musicAuthor) && (
              <div className="mb-6">
                <h3 className="text-lg font-semibold text-gray-900 mb-2">背景音乐</h3>
                <div className="bg-gray-50 p-4 rounded-lg">
                  {video.musicTitle && (
                    <p className="font-medium text-gray-900">{video.musicTitle}</p>
                  )}
                  {video.musicAuthor && (
                    <p className="text-gray-600">by {video.musicAuthor}</p>
                  )}
                  {video.audioUrl && (
                    <audio controls className="mt-2 w-full">
                      <source src={video.audioUrl} type="audio/mpeg" />
                      您的浏览器不支持音频播放。
                    </audio>
                  )}
                </div>
              </div>
            )}

            {/* 视频信息 */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
              <div>
                <span className="text-sm text-gray-600">视频ID:</span>
                <p className="font-mono text-sm">{video.videoId}</p>
              </div>
              <div>
                <span className="text-sm text-gray-600">时长:</span>
                <p>{video.duration ? `${video.duration}秒` : 'N/A'}</p>
              </div>
              <div>
                <span className="text-sm text-gray-600">发布时间:</span>
                <p>{video.publishTime ? new Date(video.publishTime).toLocaleString('zh-CN') : 'N/A'}</p>
              </div>
            </div>

            {/* 文案提取记录 */}
            {video.textExtractions.length > 0 && (
              <div>
                <h3 className="text-lg font-semibold text-gray-900 mb-2">文案提取记录</h3>
                <div className="space-y-3">
                  {video.textExtractions.map((extraction) => (
                    <div key={extraction.id} className="bg-gray-50 p-4 rounded-lg">
                      <div className="flex justify-between items-start mb-2">
                        <span className="text-sm font-medium text-gray-900">
                          {extraction.method} 提取
                        </span>
                        <span className={`px-2 py-1 rounded-full text-xs ${
                          extraction.status === 'completed' 
                            ? 'bg-green-100 text-green-800' 
                            : extraction.status === 'failed'
                            ? 'bg-red-100 text-red-800'
                            : 'bg-yellow-100 text-yellow-800'
                        }`}>
                          {extraction.status}
                        </span>
                      </div>
                      {extraction.extractedText && (
                        <p className="text-gray-700 text-sm">{extraction.extractedText}</p>
                      )}
                      {extraction.confidence && (
                        <p className="text-xs text-gray-500 mt-1">
                          置信度: {(extraction.confidence * 100).toFixed(1)}%
                        </p>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
